<template>
  <div class="execution">
    <basic-container>
      <avue-crud :before-open="beforeOpen" ref="crud" :page.sync="page" :data="tableData" :permission="permissionList" :table-loading="tableLoading" :option="tableOption" @on-load="getList" @search-change="searchChange" @refresh-change="refreshChange" @size-change="sizeChange" @current-change="currentChange" @row-update="handleUpdate">
        <template slot="menuLeft">
          <el-button v-if="permissions.mall_mallInfo_export" class="filter-item" plain type="primary" size="small" icon="el-icon-download" @click="exportExcel">导出</el-button>
        </template>
        <template slot="status" slot-scope="scope">
          <el-switch v-model="scope.row.status" active-text="启用" inactive-text="禁用" active-color="#13ce66" active-value="Y" inactive-value="N" @change="handleUpdate(scope.row)"></el-switch>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
export default {
  name: 'mallInfo',
  data() {
    return {
      searchForm: {},
      tableData: [],//表格显示的数据
      page: {
        total: 0, //总页数
        currentPage: 1, //当前页数
        pageSize: 20 //每页显示多少条
      },
      tableLoading: false,//等待
      tableOption: tableOption //CRUD主键的格式
    }
  },
  created() {//dom创建后，快于mounted

  },
  mounted() {//钩子
    this.initGroupIdList()
  },
  watch() {//用来监听变量

  },
  computed: {//用来计算属性
    ...mapGetters(['permissions']),
    permissionList() {
      return {
        addBtn: false,
        delBtn: false,
        editBtn: false
      };
    }
  },
  methods: {
    //打开前的回调，会暂停Dialog的打开，done用于关闭Dialog,type为当前窗口的类型
    beforeOpen(done, type) {
      if (["add"].includes(type)) {
        //TODO
      }
      done();
    },

  }
}

const tableOption = {
  border: true,           //边框-线
  stripe: false,          //边框-条纹

  index: false,            //是否有序号
  indexLabel: "序号",      //序号标题
  selection: true,         //行多选

  menuAlign: "center",     //菜单对齐方式 left/center/right
  menuWidth: 110,          //菜单宽度
  labelWidth: 110,         //标题字段宽度
  align: "center",         //表格内容对齐方式
  headerAlign: 'center',   //表格头对齐方式

  viewBtn: false,          //详情按钮
  editBtn: false,          //编辑按钮
  delBtn: false,           //删除按钮
  addBtn: false,           //新增按钮

  searchIndex: 2,          //收缩展示的个数
  searchIcon: true,        //是否启用功能按钮
  searchSpan: 8,           //搜索项框栅列
  searchSize: 'mini',      //按钮尺寸
  searchGutter: 0,         //搜索项框间距
  emptyText: '自定义暂无数据提示语',//空数据提示语

  fit: true,              //列的宽度是否自撑开
  dialogDrag: false,      //表格弹窗是否可以拖拽
  dialogFullscreen: false,//表格弹窗是否为全屏
  dialogCustomClass: '',  //表格弹窗自定义class
  dialogEscape: true,     //表格弹窗是否可以通过按下ESC关闭
  dialogClickModal: false,//表格弹窗是否可以通过点击modal关闭
  dialogCloseBtn: true,   //表格弹窗是否显示关闭按钮
  dialogModal: true,      //表格弹窗是否需要遮罩层
  dialogMenuPosition: right,//表格弹窗框按钮的位置 left/center/right
  dialogTop: 25,          //表格弹窗顶部的距离
  dialogType: 'dialog',   //表格弹窗方式 dialog/drawer
  dialogDirection: 'rtl', //表格弹窗打开方向 rtl/ltr/ttb/tbb
  dialogWidth: '60%',     //表格弹窗宽度

  column: [
    {
      label: "",           //列名称
      prop: "",            //列字段
      type: "",            //搜索类型（input/select/radio/checkbox/textarea/cascader/date/time/datetime/daterange/timerange/datetimerange/week/month/year/dates/password/switch/tree）
      fixed: false,	       //冻结列
      value: '',	         //默认值

      search: false,	     //search设置为true开启字段的搜索
      searchValue: "",     //搜索项初始化值
      searchPlaceholder: "",//搜索项辅助文字
      searchOrder: 1,      //搜索栏的顺序
      searchLabelWidth: 110,//标题的宽度
      searchSpan: 8,       //搜索框的宽度
      searchGutter: 1,     //搜索项框间距
      searchRange: false,	 //搜索项为范围搜索
      searchType: "",      //搜索项的类型

      bind: "",            //深结构数据绑定值

      sortable: false,     //开启表格排序
      order: 1,            //设置表格显示顺序

      cell: false,         //行可编辑时，当前列是否可编辑

      valueDefault: "",    //表单的默认值
      dateDefault: true,   //日期控件默认的值
      placeholder: "请选择/请输入+label",	//辅助语
      endPlaceholder: "",  //日期范围结束占位符String
      append: "",          //后面的辅助文字（当type为input））String/Number
      format: "yyyy-MM-dd HH:mm:ss",//显示值时间格式（当type为date/time/datetime/daterangetimerange/datetimerange/week/month/year/dates)
      valueFormat: "yyyy-MM-dd HH:mm:ss",//真实值的时间格式（当type为date/time/datetime/daterangetimerange/datetimerange/week/month/year/dates）
      startPlaceholder: "",//日期范围开始辅助文字

      slot: false,	       //列自定义
      typeslot: false,	   //表单组件自定义
      formslot: false,      //开启自定义表单格式

      html: true,          //用来格式化内容
      formatter: function(row, value, label, column) {
        return '<img src="' + value + '" style="width: 50%;"/>'
      },

      clearable: false,    //表单清空

      readonly: false,	   //只读
      hide: true,          //隐藏列
      showColumn: true,	   //是否加入动态现隐列
      overHidden: false,   //超出隐藏
      //-----------------------
      disabled: false,     // 弹出表单是否禁止
      addDisabled: false,  // 表单新增时项是否禁止
      editDisabled: false, // 表单编辑时项是否禁止
      viewDisabled: false, // 表单查看时项是否禁止
      //-----------------------
      display: true,       //弹出表单是否显示
      addDisplay: true,    // 表单新增时项是否显示
      editDisplay: true,   // 表单编辑时项是否显示
      viewDisplay: true,   // 表单查看时项是否显示

      accept: "String/Array",//为upload时文件类型
      filesize: 200,	     //为upload时文件的大小 无默认值

      filterMultiple: true,	//数据过滤的选项是否多选
      filters: [{ text, value }],	//数据过滤的选项，数组格式，数组中的元素需要有text和value属性。
      filterMethod: Function(value, row, column),	//数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回true就会显示。

      cascader: ['county'],//级联关联   查询表单不查询字典,是因为这段this.dataInit();this.handleLoadCascaderDic();去掉了加载字典dic，提高性能
      //可以使用this.$nextTick(() => this.$refs.crud.dicInit('cascader'))//数据加载完后，加载级联字典
      cascaderIndex: 1,    //级联自动带出index下数据

      span: 12,            //表单栅列
      width: 120,	         //固定列宽度
      resizable: true,     //对应列是否可以通过拖动改变宽度（需要在option中border属性为真）
      align: "left",	     //对其方式
      formHeight: auto,	   //表单行高度 Number
      formWidth: 50,	     //表单行高度 Number/String
      minWidth: auto,	     //列最小宽度
      gutter: 20,	         //间距

      maxRows: 4,	         //最大行（当type为textarea）
      minRows: 2,	         //最小行（当type为textarea）

      multiple: false,	   //多选（当type为select/tree时）
      tags: false,         //select组件多选时是否超出后合并标签

      precision: 2,	      //数字框输入精度（当type为number时）
      filterable: false,	//是否可以输入搜索。
      rules: [            //表单规则,参考ele表单规则配置
        {
          required: true,
          message: '请选择XXX',
          trigger: 'blur'
        }
      ],
      size: "medium",	    //表单大小 medium/small/mini
    },
    {
      label: '超链接',
      prop: 'href',
      type: 'url'                     //超链接
    },
    {
      label: "启用状态",               //状态，单选框
      prop: "status",
      type: 'radio',
      span: 12,
      rules: [{
        required: true,
        message: '请选择状态',
        trigger: 'blur'
      }],
      dicData: [{                     //状态- 设置dicData本地字典
        label: '有效',
        value: 'Y'
      }, {
        label: '失效',
        value: 'N'
      }]
    },
    {
      label: '图片',
      prop: 'img',
      dataType: 'string',
      type: 'img'                     //img 图片
    },
    {
      label: '开关',
      prop: 'switch',
      type: 'switch',
      cell: true
    },
    {
      label: "LOGO图片地址",
      prop: "logo",
      type: "upload",                 //upload 图片上传
      listType: 'picture-img',        //picture-img单图上传，picture-card多图上传
      dataType: 'string',             //数据类型string
      tip: '只能上传jpg/png文件,且不超过500kb',
      action: '/admin/sys-file/upload',
      propsHttp: {                    //上传后拼接回显地址: home +  res.data.url
        home: 'http://localhost:8080',
        res: 'data'
      },
    }
  ]
}
</script>